<template>
  <view class="page bg-white">
    <view class="main">
      <SimpleTabs :list="tabList" :current="0" @change="changeTab" />
      <u-divider></u-divider>
      <!-- 选择班级 -->
      <view>
        <view class="flex">
          <u-text text="选择参与分班的班级" size="32rpx" color="#333" bold></u-text>
          <u-text align="right" text="共30人" size="24rpx" color="#666"></u-text>
        </view>
        <view class="form-item" @click="showClassPicker = true">
          <u-text text="请选择班级" size="32rpx" color="#333" v-if="formData.class.length === 0"></u-text>
          <template v-else>
            <u-tag v-for="item in formData.class" :key="item" :text="item"></u-tag>
          </template>
          <u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
        </view>
      </view>
      <!-- 分班规则 -->
      <view class="margin-top">
        <view class="flex">
          <u-text text="分班规则" size="32rpx" color="#333" bold></u-text>
        </view>
        <view class="form-item" @click="showClassRulePicker = true">
          <u-text text="请选择分班规则" size="32rpx" color="#333"></u-text>
          <u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
        </view>
      </view>
      <!-- 分班数量 -->
      <view class="margin-top">
        <view class="flex">
          <u-text text="分班数量" size="32rpx" color="#333" bold></u-text>
        </view>
        <view class="form-item" @click="showClassCountPicker = true">
          <u-text text="请选择分班数量" size="32rpx" color="#333"></u-text>
          <u-icon name="arrow-down" size="32rpx" color="#999"></u-icon>
        </view>
      </view>

      <!-- 选择班级 -->
      <u-popup :show="showClassPicker" :closeOnClickOverlay="true" @close="showClassPicker = false"
        @cancel="showClassPicker = false">
        <view class="padding">
          <view class="flex">
            <u-text text="取消" color="#666" @click="showClassPicker = false"></u-text>
            <u-text align="right" text="确定" :color="themePrimary" @click="handleClassPickerConfirm"></u-text>
          </view>
          <view class="margin-tb-xl">
            <u-checkbox-group :borderBottom="true" iconPlacement="right" v-model="selectedClass" placement="column">
              <u-checkbox v-for="item in classList" :key="item.name" :value="item.value"
                :label="item.name"></u-checkbox>
            </u-checkbox-group>
          </view>
        </view>
      </u-popup>
      <!-- 分班规则 -->
      <u-picker :closeOnClickOverlay="true" :show="showClassRulePicker" :columns="classRules"
        @confirm="handleClassRulesConfirm" @close="showClassRulePicker = false"
        @cancel="showClassRulePicker = false"></u-picker>
      <!-- 分班数量 -->
      <u-picker :closeOnClickOverlay="true" :show="showClassCountPicker" :columns="classCount"
        @confirm="handleClassCountConfirm" @close="showClassCountPicker = false"
        @cancel="showClassCountPicker = false"></u-picker>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="一键分班预览" @click="toPreview"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import SimpleTabs from '@/components/SimpleTabs/index.vue';
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeTertiary } = useTheme();
const tabList = ref([
  { name: '托管班' },
  { name: '周末班' },
]);

const changeTab = (index) => {
  console.log(index);
};

const showClassPicker = ref(false);
const showClassRulePicker = ref(false);
const showClassCountPicker = ref(false);

const classRules = ref([['按成绩分班', '分班规则2', '分班规则3']]);

const classCount = ref([['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']]);

const classList = ref([{ name: '托管班：一年级（A）班', value: '托管班：一年级（A）班' }, { name: '周末班：一年级-数学（A）班', value: '周末班：一年级-数学（A）班' }]);

const selectedClass = ref([]);

const formData = ref({
  class: [],
});

const handleClassRulesConfirm = (e) => {
  console.log(e);
  showClassRulePicker.value = false;
}

const handleClassCountConfirm = (e) => {
  console.log(e);
  showClassCountPicker.value = false;
}

const handleClassPickerConfirm = (e) => {
  console.log(e);
  showClassPicker.value = false;
  formData.value.class = selectedClass.value;
}

const toPreview = () => {
  uni.navigateTo({
    url: '/pages/principal/education/classroomManage/previewDivideIntoClass'
  });
}
</script>
<style scoped lang="scss">
.page {
  background-color: #f5f5f5;
}
</style>